<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
</head>
<body>
<div class="course_list">
    <ul id="course_list_content">
    </ul>
</div>
<div id="page" class="clearfix"></div>
<script src="../layui/layui.js"></script>
<script>

    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'jquery', 'laypage'], function () {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery
            , laypage = layui.laypage;

        next_page();

        function next_page(curr) {
            //var curr;//定义当前页
            var pageSize = 5; //每页出现的数量

            $.getJSON('json.json', {page: curr || 1, pageSize: pageSize},function (data) {

                //alert(data.success);
                if (data.success) {
                    var pages = Math.ceil(data.list.length / pageSize); //得到总页数
                    var thisDate = function (curr) {
                        var str = '', last = curr * pageSize - 1;
                        last = last >= data.list.length ? (data.list.length - 1) : last;
                        for (var i = (curr * pageSize - pageSize); i <= last; i++) {
                            // str += '<li><a href="' + data.list[i].url + '">';
                            //str += '<div class="maskWraper"> <img src="' + data.list[i].pic + '" alt="响应式图片" width="180" height="180" class="thumbnail lazy">';
                            str += '<div class="maskBar text-c">' + data.list[i].bartext + (i + 1) + '</div>';
                            str += '</div><h5 class="f-16 c-666 l-30">' + (i + 1) + data.list[i].title + '</h5>';
                            // str += '</a><a href="' + data.list[i].url + '" class="btn btn-primary size-M radius">点击查看详情》</a></li>';
                        }
                        return str;
                    };
                    //调用分页
                    laypage.render({
                        elem: 'page', //容器。值支持id名、原生dom对象，jquery对象,
                        count:data.list.length,
                        // pages: pages, //总页数
                        // groups: 0, //连续分数数0
                        // prev: false, //不显示上一页
                        // next: '查看更多',
                        // skin: 'flow', //设置信息流模式的样式
                        jump: function (obj) {
                            if (obj.curr === (pages - 1)) {
                                this.next = '没有更多了';
                            }
                            $('#course_list_content').append(thisDate(obj.curr));
                            //$.Huihover('.maskWraper');
                        }
                    });
                } else {
                    alert("数据错误");
                }

            })

        }



    });




</script>
</body>
</html>